<template>
    <div id="chat">
        <div class="sidebar">
            <card></card>
            <list :session="session"></list>
        </div>
        <div class="main">
            <message :session="session"></message>
            <text :session="session"></text>
        </div>
    </div>
</template>

<script>
    import store from '../vuex/store'
    import card from './card.vue'
    import list from './list.vue'
    import message from './message.vue'
    import text from './text.vue'
    export default{
        store,
        components: {
            card, list, text, message
        },
        computed: {
            session () {
                return this.sessionList[this.sessionIndex];
            }
        },
        vuex:{
            getters:{
                sessionList :  ({sessionList}) => sessionList.items,
                sessionIndex : ({sessionList}) => sessionList.sessionIndex
            },
        }
    }
</script>
<style lang="less">
    #chat {
        overflow: hidden;
        border-radius: 3px;

        .sidebar, .main {
            height: 100%;
        }
        .sidebar {
            float: left;
            width: 200px;
            color: #f4f4f4;
            background-color: #2e3238;
        }
        .main {
            position: relative;
            overflow: hidden;
            background-color: #eee;
        }
        .m-text {
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
        }
        .m-message {
            height: ~'calc(100% - 160px)';
        }
    }
</style>
